<template>
    <div class="table-box">
        <el-form ref="form" :model="form" label-width="120px">
            <el-collapse v-model="activeNames" @change="handleChange">
                <el-collapse-item title="合同信息" name="1">

                    <el-col :span="24">
                        <el-col :span="12">
                            <el-form-item label="选择合同">
                                <el-col :span="20">
                                    <template>
                                        <el-autocomplete v-model="form.info_title" :fetch-suggestions="querySearchAsync"
                                            @select="handleSelect" placeholder="请输入名称">
                                        </el-autocomplete>
                                        <!-- <el-select v-model="value" multiple filterable @change="aa()" remote reserve-keyword
                                            placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading">
                                            <el-option v-for="item in options" :key="item.value" @clieck="alert(1)"
                                                :label="item.label" :value="item.value">
                                            </el-option>
                                        </el-select> -->
                                    </template>
                                </el-col>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                        </el-col>
                    </el-col>

                    <el-col :span="24">
                        <el-col :span="12">
                        </el-col>
                        <el-col :span="12">
                        </el-col>
                    </el-col>

                    项目基础信息
                    <br>
                    <el-col :span="24">
                        <el-col :span="12">
                            <el-form-item label="项目名称">
                                <el-col :span="20">
                                    <el-input v-model="form.title" placeholder="输入项目名称" />
                                </el-col>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="项目所在县（市）区">
                                <el-col :span="20">
                                    <el-input v-model="form.address" placeholder="输入项目所在县（市）区" />
                                </el-col>
                            </el-form-item>
                        </el-col>
                    </el-col>

                    <el-col :span="24">
                        <el-col :span="12">
                            <el-form-item label="建设规模">
                                <el-col :span="20">
                                    <el-input v-model="form.size" placeholder="输入建设规模" />
                                </el-col>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="联系电话">
                                <el-col :span="20">
                                    <el-input v-model="form.phone" placeholder="输入联系电话" />
                                </el-col>
                            </el-form-item>
                        </el-col>
                    </el-col>

                    <el-col :span="24">
                        <el-col :span="12">
                            <el-form-item label="耕地占用税（是否缴纳）">
                                <el-col :span="20">
                                    <el-radio v-model="form.gdzyf" label="是">是</el-radio>
                                    <el-radio v-model="form.gdzyf" label="否">否</el-radio>
                                </el-col>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="土地使用税（是否缴纳）">
                                <el-col :span="20">
                                    <el-radio v-model="form.tdsys" label="是">是</el-radio>
                                    <el-radio v-model="form.tdsys" label="否">否</el-radio>
                                </el-col>
                            </el-form-item>
                        </el-col>
                    </el-col>

                    <el-col :span="24">
                        <el-col :span="12">
                            <el-form-item label="城市维护建设税（适用税率）">
                                <el-col :span="20">
                                    <el-input v-model="form.cswhjss" placeholder="" />
                                </el-col>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="土地增值税项目编号">
                                <el-col :span="20">
                                    <el-input v-model="form.tdzzs" placeholder="*多个以英文逗号分隔" />
                                </el-col>
                            </el-form-item>
                        </el-col>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="时间范围">
                            <el-date-picker :value-format="'yyyy-MM-dd HH:mm:ss'" v-model="form.time" type="daterange"
                                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>

                </el-collapse-item>


                <el-collapse-item title="人员信息" name="2">
                    <div>
                        <div class="collapse2-titlebox">
                            <span class="collapse2-titlebox-t">提示:填写负责人和协助人员</span>
                            <div class="collapse2-title-right">
                                <span class="jia" @click="clickAdd">+</span>
                                <span class="jian" @click="clickMinus">-</span>
                            </div>
                        </div>
                        <br>
                        <div class="collapse2-listbox">

                            <el-table ref="multipleTable" :data="form.tableData" tooltip-effect="dark" style="width: 100%"
                                @selection-change="handleSelectionChange">

                                <el-table-column prop="user_id" label="姓名" width="300">
                                    <template slot-scope="scope">
                                        <el-select v-model="scope.row.name" placeholder="选择员工">
                                            <el-option v-for="item in userList" :key="item.id" :label="item.username"
                                                :value="item.id" :user_id="item.id">
                                            </el-option>
                                        </el-select>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="clickConfirm">确 定</el-button>
        </div>
    </div>
</template>
    
<script>
import contractApi from '@/api/contract'
import clientApi from '@/api/client'
import projectApi from '@/api/project'

export default {
    data() {
        return {
            contract_id: '',
            contract_title: '',
            timeout: null,
            options: [],
            value: [],
            loading: false,
            states: [],

            userList: [],

            activeNames: ['1', '2'],
            restaurants: [],
            state: '',
            timeout: null,

            typeList: [],

            id: '',

            form: {
                info_title: '',
                tableData: [
                    { user_id: '' }
                ],
            },

            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            value2: '',
            queryString: '',
        };
    },
    methods: {
        //搜索项目
        querySearchAsync(queryString, cb) {
            clearTimeout(this.timeout);
            var results = []
            if (queryString == '') {
                cb(results);
            } else {
                if (this.queryString != queryString) {
                    this.queryString = queryString

                    contractApi.contractKeyword(queryString).then(response => {
                        // console.log(response.data);
                        var result = response.data.list
                        //循环放到一个远程搜索需要的数组
                        for (let i = 0; i < result.length; i++) {
                            const element = result[i];
                            results.push({
                                value: element.info_title,
                                id: element.id
                            })
                        }
                        cb(results);
                    })

                }

                //掉接口需要的参数
                var find = {
                    keyword: queryString,//上面输入框绑定的数据
                    type: 0
                };
                // alert(321)
                // console.log(queryString);
                //这里去掉后端的接口.根据自己接口的情况进行赋值



                // this.$post("/customer-search", this.encode(find)).then(
                //     res => {
                //         if (res.success == 'true') {
                //             var result = res.result
                //             //循环放到一个远程搜索需要的数组
                //             for (let i = 0; i < result.length; i++) {
                //                 const element = result[i];
                //                 results.push({
                //                     value: element.full_name,
                //                     id: element.customer_id
                //                 })
                //             }
                //             cb(results);
                //         } else {
                //             results = []
                //             cb(results);
                //         }
                //     }
                // );
            }
        },
        //点击出现搜索后点击的每一项
        handleSelect(item) {
            this.form.contract_id = item.id
        },

        //添加/修改项目
        clickConfirm() {
            console.log(this.form);

            projectApi.saveProject(this.form).then(response => {
                this.$message({
                    message: response.message,
                    type: 'success'
                });
                // that.dialogFormVisible = false;

                this.$router.push('/project/projectIndex')
            }).catch(e => {
                loading.close();
                console.log(e)
            })

            // this.$refs.formRef.validate((valid) => {
            //     if (valid) {
            //         projectApi.saveProject(this.form).then(response => {
            //             this.$message({
            //                 message: response.message,
            //                 type: 'success'
            //             });
            //             this.dialogFormVisible = false;
            //         })
            //     } else {
            //         console.log('error submit!!');
            //         return false;
            //     }
            // });
        },

        remoteMethod(query) {
            if (query !== '') {
                this.loading = true;
                setTimeout(() => {
                    this.loading = false;
                    this.options = this.list.filter(item => {
                        return item.label.toLowerCase()
                            .indexOf(query.toLowerCase()) > -1;
                    });
                }, 200);
            } else {
                this.options = [];
            }
        },
        getTypeList() {
            let self = this;
            contractApi.getTypeList(self.form.type1).then(response => {
                this.typeList = response.data.list;
            })
        },


        handleChange(val) {
            // console.log(val);
        },
        // 添加联系人--选中功能
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 点击增加
        clickAdd() {
            const tableData = this.form.tableData;
            tableData.push({
                user_id: '',
            })
            this.form.tableData = tableData;
        },
        // 点击减号
        clickMinus() {
            const tableData = this.form.tableData;
            if (tableData.length == 1) {
                return
            } else {
                tableData.pop()
            }
            this.form.tableData = tableData;
        },

        //获取下拉框用户
        getUidList() {
            clientApi.getUidList().then(response => {
                this.userList = response.data;
            })
        },

        //修改前获取项目信息
        getProjectInfo() {
            projectApi.getProjectInfo(this.id).then(response => {
                this.form = response.data.info;
                this.form.info_title = response.data.info.contract_info.info_title;
            })
        },

        //修改前获取员工信息
        getProjectUserInfo() {
            projectApi.getProjectUserInfo(this.id).then(response => {
                this.form.tableData = response.data.list;
                console.log(response.data.list);
            })
        },
    },
    created() {
        var query = this.$route.query;
        console.log(query);
        if (query.id) {
            this.id = query.id;
            this.getProjectInfo();
            this.getProjectUserInfo();
        }
        this.getUidList();
    },
};
</script>
    
<style>
.table-box {
    width: 100%;
    height: 1500px;
    background: #FFFFFF;
    box-shadow: 0px 1px 16px 0px rgba(202, 204, 204, 0.65);
    border-radius: 4px;
    padding: 50px 16px 16px 100px;
}

.collapse2-titlebox {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.collapse2-titlebox-t {
    font-size: 12px;
    color: #666;
}

.collapse2-title-right {
    display: flex;
    align-items: center;
}

.collapse2-title-right>span {
    font-size: 15px;
    font-weight: bold;
    margin-right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: #fff;
    line-height: 1 !important;
    cursor: pointer;
}

.collapse2-title-right>span.jia {
    background: #409eff;
}

.collapse2-title-right>span.jian {
    background: #999;
}

.collapse2-listbox ::v-deep .el-input__inner {
    /* height: 30px; */
    /* line-height: 30px; */
}
</style>